<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    v-loading="isLoading"
  >
    <el-form-item label="用户名" prop="userName">
      <el-input v-model="ruleForm.userName" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="passWord">
      <el-input v-model="ruleForm.passWord" type="password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive, h } from "vue";
import type { ElForm } from "element-plus";
import { ElNotification } from 'element-plus'
import axios from "axios"
type FormInstance = InstanceType<typeof ElForm>;
const ruleFormRef = ref<FormInstance>();
const isLoading: any = ref(false)

const validatePass = (_rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  }
  else if (value.length < 8 || value.length > 16) {
    callback(new Error("密码要在8-16位之间"));
  }
  else callback();
};

const ruleForm = reactive({
  passWord: "",
  userName: "",
});

const rules = reactive({
  userName: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 10,
      message: '用户名要在3-10位之间!',
      trigger: 'blur',
    },
  ],

  passWord: [{ required: true, validator: validatePass, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      isLoading.value = true;
      axios.get('http://localhost:8081/Login', {
        params: {
          ...ruleForm
        }
      }).then((res) => {
        console.log(res);
        isLoading.value = false;
        if (res.status != 200) {
          ElNotification({
            title: '404',
            message: h('text', { style: 'color: red' }, '网络连接失败'),
            type: 'error'
          })
          return;
        }
        if (res.data.isLogin) {
          ElNotification({
            title: '成功',
            message: h('text', { style: 'color: green' }, '登录成功'),
            type: 'success'
          })
        }
        else {
          ElNotification({
            title: '成功',
            message: h('text', { style: 'color: red' }, '登录失败'),
            type: 'error'
          })
        }
      }).catch((err) => {
        console.log(err);
        isLoading.value = false;
        ElNotification({
          title: '错误',
          message: h('text', { style: 'color: red' },err),
          type: 'error'
        })
      })
    } else {
      ElNotification({
        title: '格式错误',
        message: h('text', { style: 'color: red' }, '信息填写格式错误'),
        type: 'error'
      })
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
.demo-ruleForm {
  width: 100%;
}
</style>